<template>
  <div class="detail section">
    <!-- <div class="pager-title">{{$route.meta.title}}</div> -->
    <div class="h2">银行信息 <span class="tips danger-text">注意:修改银行卡会和身份证进行实名认证，如果错误将无法通过，最多只有三次修改机会!</span></div>
    <el-form :model="formData" label-width="120px" style="width: 600px;margin: 30px auto;">
      <el-form-item label="银行卡号：">
        <el-input style="width: 400px;" v-model="formData.bank_number" placeholder="银行卡号"></el-input>
      </el-form-item>
      <el-form-item label="开户银行：">
        <el-input style="width: 400px;" v-model="formData.bank_name" placeholder="开户银行"></el-input>
      </el-form-item>
      <el-form-item label="开户行地址：">
        <el-input style="width: 400px;" v-model="formData.bank_address" placeholder="开户行地址"></el-input>
      </el-form-item>
      <el-form-item label="银行预留手机：">
        <el-input style="width: 400px;" v-model="formData.bank_phone" placeholder="银行预留手机"></el-input>
      </el-form-item>
    </el-form>
    <div class="buttons">
      <el-button type="primary" :disabled="status === '待审核'" @click="submit()">{{status === '待审核' ? '等待审核' : '提交审核'}}</el-button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'detail',
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  data() {
    return {
      formData: {
        bank_number: '',
        bank_name: '',
        bank_address: '',
        bank_phone: ''
      },
      status: ''
    }
  },
  methods: {
    getInfo() {
      this.$http.get('/personal/personal-correct/info').then(res => {
        if (res.status === 1) {
          if (res.data.apply) {
            this.status = res.data.apply.status
          }
          if (res.data.apply && res.data.apply.status === '待审核') {
            this.formData.bank_number = res.data.apply.bank_number
            this.formData.bank_name = res.data.apply.bank_name
            this.formData.bank_address = res.data.apply.bank_address
            this.formData.bank_phone = res.data.apply.bank_phone
          } else {
            this.formData.bank_number = res.data.current.bank_number
            this.formData.bank_name = res.data.current.bank_name
            this.formData.bank_address = res.data.current.bank_address
            this.formData.bank_phone = res.data.current.bank_phone
          }
        }
      })
    },
    submit() {
      let loading = this.$loading({
        lock: true,
        text: '验证中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$http.post('/personal/personal-correct/apply', this.formData).then(res => {
        loading.close()
        if (res.status === 1) {
          this.$message.success('提交成功')
          this.getInfo()
        }
      })
    }
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style lang="less" scoped>
.code-img {
  display: inline-block;
  width: 100px;
  height: 40px;
  margin-left: 10px;
  vertical-align: top;
}
</style>